<template>
  <!-- 归档信息管理页面 -->
  <div class="fielDetail">
    <div class="info-center">
      <div class="item" v-for="(item, index) in list" :key="item.title + index">
        <img :src="item.image" alt="" />
        <div class="title">{{ item.title }}</div>
        <div class="tip">{{ item.tip }}</div>
        <div class="btn" @click="goup(item.id)">点击进入</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "fielDetail",
  data() {
    return {
      list: [
        {
          title: "大纲文件",
          tip: "根据业务内容及体系所编写的指导文件",
          image: require("../assets/one.png"),
          id: 1,
        },
        {
          title: "详细设计",
          tip: "因业务需求及体系所设计的详细内容",
          image: require("../assets/two.png"),
          id: 2,
        },
        {
          title: "概要设计",
          tip: "因业务需求及体系进行的概要设计",
          image: require("../assets/tree.png"),
          id: 3,
        },
        {
          title: "审计文件",
          tip: "根据业务需要制作的并经上级签发的各类型的文件",
          image: require("../assets/f.png"),
          id: 4,
        },
      ],
    };
  },
  activated() {},
  mounted() {},
  destroyed() {},
  methods: {
    goup(id) {
      this.$router.push({
        path: "/fileUplist",
        query: {
          id: id, //参数
        },
      });
    },
    save() {
      let obj = {
        fileName: this.formLabelAlign.fileName,
        fileTime: this.formLabelAlign.fileTime,
        creator: this.formLabelAlign.creator,
        id: this.formLabelAlign.id,
      };
      let obj2 = {
        ocrRecognitionAccuracy: this.radioOne,
        bibliographicIntegrity: this.radioTwo,
        directoryFormatSpecification: this.radioThree,
        dataId: this.formLabelAlign.id,
      };
      if (this.formLabelAlign.fileType == 1) {
        this.$api.save(obj).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.goBank();
            if (this.orcDate) {
              this.$api.updateOCRInfo(obj2).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: res.msg,
                    type: "success",
                  });
                  this.goBank();
                }
              });
            }
          }
        });
      } else {
        this.$api.save(obj).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.goBank();
          }
        });
      }
    },
    goBank() {
      this.$router.push({ path: "/fileUplist" });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/mixin.scss";
@import "@/css/flex.scss";
.fielDetail {
  overflow: hidden;
  padding-bottom: 50px;
  .orc {
    cursor: pointer;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .item {
    width: 375px;
    height: 320px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    padding: 20px;
    float: left;
    margin-right: 30px;
    img {
      width: 66px;
      height: 66px;
    }
    &:nth-child(1) {
      img {
        background: #257bf7;
        border-radius: 0px 0px 0px 0px;
      }
    }
    &:nth-child(2) {
      img {
        background: #02c014;
        border-radius: 0px 0px 0px 0px;
      }
    }
    &:nth-child(3) {
      img {
        background: #0765ef;
        border-radius: 0px 0px 0px 0px;
      }
    }
    &:nth-child(4) {
      img {
        background: #ea3333;
        border-radius: 0px 0px 0px 0px;
      }
    }
    .title {
      font-size: 22px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #171f34;
      margin-top: 30px;
      margin-bottom: 12px;
    }
    .tip {
      height: 50px;
      font-size: 18px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #171f34;
      margin-bottom: 30px;
      opacity: 0.5;
    }
    .btn {
      width: 315px;
      height: 48px;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid rgba(51, 134, 254, 0.08);
      font-size: 18px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #3386fe;
      line-height: 48px;
      text-align: center;
      margin: 0 auto;
      background: rgba(51, 134, 254, 0.08);
      cursor: pointer;
    }
  }
  //中间
  .info-center {
    padding: 30px;
  }
  //底部
}
</style>